<template>
	<view class="container">
		<u-navbar title="套餐升级" :border-bottom="false" :background="{backgroundColor:'#272325'}" title-color="#E4B993"
			back-icon-color="#E4B993"></u-navbar>
		<view class="container_mysetmeal">
			<view class="container_mysetmeal_tp">
				<u-image :src="url + '/static/background_1.png'" width="100%" height="100%" mode="widthFix"></u-image>

				<view class="container_mysetmeal_tp_info">
					<view class="u-p-t-46 u-p-l-50" style="color: #F7BC87;">
						<view class="u-font-26">
							我的套餐：{{data.mySetmeal.name}}
						</view>
						<view class="u-m-t-16 u-font-24" v-if="data.mySetmeal.deadline == 0">
							有效时间：无限期
						</view>
						<view class="u-m-t-16 u-font-24" v-else>
							有效时间：{{$u.timeFormat(data.mySetmeal.deadline)}}
						</view>
					</view>
					<view class="container_mysetmeal_tp_info_privilege" @click="handleToPrivilege">
						查看我的特权
						<u-icon name="arrow-right"></u-icon>
					</view>
				</view>
			</view>
			<u-image class="container_mysetmeal_btm" src="/pages/pagesPersonal/static/toolMall/background_2.png"
				width="100vw" height="112rpx" mode="widthFix"></u-image>
		</view>

		<view class="container_main">
			<view class="container_main_tit">
				<view>
					权益升级 服务赋能
				</view>
				<text>
					升级套餐 尽享更多权益
				</text>
			</view>
			<!-- 套餐列表 -->
			<view class="u-m-t-76 u-m-l-32 u-m-r-32">
				<u-scroll-list :indicator="false">
					<view class="u-flex">
						<view class="container_main_item"
							:class="data.current == index ? 'container_main_item--active' :''"
							v-for="(item, index) in data.list" :key="index" @click="change(index)">
							<view class="container_main_item_content">
								<view class="packgeName">
									{{item.name}}
								</view>
								<view class="money">
									￥{{item.expense}}
								</view>
							</view>
							<view class="days">
								时长：{{item.days}}天
							</view>

						</view>
					</view>
				</u-scroll-list>
			</view>
			<!-- 套餐信息 -->
			<view class="container_main_info u-m-t-20">
				<view class="container_main_info--tit">
					套餐资源
				</view>
				<view class="container_main_info--ls u-flex u-row-between u-m-t-12">
					<view>
						职位并发数：{{data.packageInfo.jobs_meanwhile}}
					</view>
					<view>
						赠送简历点数：{{data.packageInfo.download_resume_point}}
					</view>
					<view>
						赠送职聊次数：{{data.packageInfo.im_total}}
					</view>
					<view>
						赠送会员积分：{{data.packageInfo.gift_point}}
					</view>
					<view>
						免费刷新职位：{{data.packageInfo.refresh_jobs_free_perday}}次/天
					</view>
					<view>
						下载简历上限：{{data.packageInfo.download_resume_max_perday}}份/天
					</view>
					<view>
						发起职聊上限：{{data.packageInfo.im_max_perday}}次/天
					</view>
				</view>
				<view class="u-m-t-38 container_main_info--tit">
					套餐权限
				</view>
				<view class="container_main_info--ls u-flex u-row-between">
					<view v-if="data.packageInfo.service_added_discount > 0">
						套餐增值包折扣{{ data.packageInfo.service_added_discount }}折
					</view>
					<view v-if="data.packageInfo.enable_poster == 1">
						允许使用微海报
					</view>
					<view v-if="data.packageInfo.enable_video_interview == 1">
						允许使用视频面试
					</view>
					<view v-if="data.packageInfo.show_apply_contact == 1">
						收到简历免费查看
					</view>
				</view>
			</view>

			<!-- 支付信息 -->
			<view class="container_main_pay">
				<view class="container_main_pay_tp u-flex u-row-between" v-if="data.packageInfo">
					<view class="u-font-14">优惠券</view>
					<view class="u-flex" v-if="data.couponList.length <= 1">
						<view class="u-m-r-16">
							暂无可用优惠券
						</view>
						<u-icon name="arrow-right" color="#79350E"></u-icon>
					</view>
					<view class="u-flex" v-else @click="data.isCoupon = true">
						<view class="u-m-r-16">
							{{data.couponName}}
						</view>
						<u-icon name="arrow-right" color="#79350E"></u-icon>
					</view>
				</view>
				<view class="container_main_pay_btm" v-if="data.amount != 0">
					<u-radio-group wrap v-model="data.value">
						<u-radio active-color="#79350E" v-for="(item, index) in data.payList" :key="index"
							:name="item.value">
							<view class="u-flex u-row-between u-col-center">
								<u-image :src="item.image" width="50rpx" :height="item.height"></u-image>
								<view class="u-m-l-20">
									{{item.name}}
								</view>
							</view>
						</u-radio>
					</u-radio-group>
				</view>
			</view>
		</view>
		<view class="container_btm">
			<view class="u-font-weight">
				应付金额：￥{{data.amount}}
			</view>
			<view class="container_btm_pay" @click="$u.throttle(paySubmit, 1000)">立即支付</view>
		</view>
		<u-select v-model="data.isCoupon" :list="data.couponList" @confirm="couponConfirm"></u-select>
	</view>
</template>

<script setup>
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import {
		reactive,
		watch
	} from "vue";
	import development from '/config/development'
	import production from '/config/productions'
	const url = process.env.NODE_ENV === 'development' ? development.url : production.url;
	const data = reactive({
		mySetmeal: {},
		isJobNum: false,
		setmeal_name: '',
		// 套餐列表
		list: [],
		// 选中套餐
		current: 0,
		// 套餐信息
		packageInfo: '',
		// 优惠券
		couponName: '请选择优惠券',
		// 优惠券列表
		isCoupon: false,
		couponList: [{
			value: 0,
			extra: 0,
			label: '不使用优惠券'
		}],
		// #ifdef MP-WEIXIN
		payList: [{
			name: '微信支付',
			image: '/static/personal/wxPay.png',
			height: '42rpx',
			value: 1
		}],
		// #endif
		// #ifndef MP-WEIXIN 
		payList: [{
				name: '微信支付',
				image: '/static/personal/wxPay.png',
				height: '42rpx',
				value: 1
			},
			{
				name: '支付宝支付',
				image: '/static/personal/zfbPay.png',
				height: '50rpx',
				value: 2
			}
		],
		// #endif
		// u-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中
		value: 1,
		// 支付信息
		submitData: {
			service_type: 'setmeal',
			service_id: 0,
			payment: 'wxpay',
			coupon_id: 0
		},
		// 应付金额
		amount: 0,
		// 实际价格
		old_amount: 0
	})
	onLoad(() => {
		getMysetmeal()
	})
	watch(() => data.value, (nv) => {
		data.submitData.payment = nv == 1 ? 'wxpay' : 'alipay'
	}, {
		immediate: true,
		deep: true
	})
	// 拉起支付
	const paySubmit = async () => {
		if (data.packageInfo.is_apply === 0) return uni.$u.toast('此套餐暂不允许购买')
		let orderInfo = await uni.$u.api.company_pay(data.submitData)
		if (orderInfo.pay_status == 1) {
			uni.$u.toast('支付成功')
			setTimeout(() => {
				uni.$u.route({
					type: 'redirect',
					url: 'pages/pagesPersonal/integral/serve/serve'
				})
			}, 500)
		} else {
			// #ifndef H5
			// 拉起收银台
			uni.requestPayment({
				provider: data.submitData.payment,
				orderInfo: orderInfo.parameter, //微信、支付宝订单数据 【注意微信的订单信息，键值应该全部是小写，不能采用驼峰命名】
				success(res) {
					uni.$u.toast('支付成功')
					setTimeout(() => {
						uni.$u.route('pages/pagesPersonal/integral/serve/serve')
					}, 500)
				},
				fail(err) {
					uni.$u.toast('您已取消支付')
				}
			});
			// #endif
			// #ifdef H5
			uni.$u.toast('暂不支持')
			// #endif

		}
	}
	// 选择优惠券
	const couponConfirm = (e) => {
		data.submitData.coupon_id = e[0].value
		data.couponName = e[0].label
		data.amount = data.old_amount
		if (e[0].extra != 0 && e[0].extra != undefined) {
			data.amount = (parseInt(data.amount) - parseInt(e[0].extra)).toFixed(2)
			if (data.amount < 0) data.amount = 0.0
			if (data.amount == 0) data.submitData.payment = 'coupon'
		}
	}
	/* 选择服务 */
	const change = (index) => {
		data.current = index
		data.packageInfo = data.list[data.current]
		data.submitData.coupon_id = 0
		data.submitData.service_id = data.packageInfo.id
		data.old_amount = data.packageInfo.expense
		data.amount = data.packageInfo.expense
		data.couponList = [{
			value: 0,
			extra: 0,
			label: '不使用优惠券'
		}]
		if (data.packageInfo.couponList.length > 0) {
			data.packageInfo.couponList.forEach(item => {
				let coupon = {
					label: item.name + '(-￥' + item.face_value + ')',
					value: item.id,
					extra: item.face_value
				}
				data.couponList.push(coupon)
			})
		}
	}
	// 查看我的特权
	const handleToPrivilege = () => {
		uni.$u.route('/pages/pagesPersonal/other/privilege')
	}
	// 获取企业特权信息及套餐分类信息
	const getMysetmeal = async () => {
		let {
			info
		} = await uni.$u.api.getMysetmeal()
		data.mySetmeal = info
		let res = await uni.$u.api.setmealList()
		data.list = res.items
		data.packageInfo = data.list[data.current]
		data.submitData.service_id = data.packageInfo.id
		data.amount = data.packageInfo.expense
		data.old_amount = data.packageInfo.expense
		if (data.packageInfo.couponList.length > 0) {
			data.packageInfo.couponList.forEach(item => {
				let coupon = {
					label: item.name + '(-￥' + item.face_value + ')',
					value: item.id,
					extra: item.face_value
				}
				data.couponList.push(coupon)
			})
		}
	}
</script>
<style>
	page {
		background-color: #272325;
	}
</style>
<style lang="scss" scoped>
	.container {
		&_mysetmeal {
			display: flex;
			flex-direction: column;
			align-items: center;
			position: relative;
			padding-top: 30rpx;

			&_tp {
				width: 682rpx;
				height: 328rpx;
				z-index: 10;
				position: relative;

				&_info {
					position: absolute;
					top: 0;
					left: 0;

					&_privilege {
						background-image: url('/pages/pagesPersonal/static/toolMall/mysetmeal.png');
						background-size: 100% 100%;
						width: 220rpx;
						height: 54rpx;
						line-height: 54rpx;
						font-size: 24rpx;
						text-align: center;
						color: #101010;
						margin-top: 50rpx;
					}
				}
			}

			&_btm {
				position: absolute;
				bottom: -30rpx;
			}
		}

		&_main {
			margin-top: 20rpx;
			padding-top: 34rpx;
			background-image: url('/pages/pagesPersonal/static/toolMall/background_3.png');
			background-size: 100% 100%;
			color: #101010;
			padding-bottom: 160rpx;
			position: relative;

			&_tit {
				font-size: 40rpx;
				font-weight: bold;
				text-align: center;

				text {
					font-size: 24rpx;
					font-weight: normal;
					border: 2rpx solid #101010;
					padding: 18rpx 24rpx;
					margin-top: 16rpx;
					display: inline-block;
				}
			}

			&_item {
				width: 240rpx;
				height: 280rpx;
				margin-right: 42rpx;
				text-align: center;
				position: relative;
				color: #101010;
				font-size: 24rpx;
				background-image: url('/pages/pagesPersonal/static/toolMall/packageItem.png');
				background-size: 100% 100%;


				&--active {
					background-image: url('/pages/pagesPersonal/static/toolMall/packageActiveItem.png');
				}

				&_content {

					height: 200rpx;

					.packgeName {
						padding-top: 48rpx;
					}

					.money {
						color: #EE1010;
						font-size: 28rpx;
						padding-top: 32rpx;
					}
				}

				.days {
					height: 80rpx;
					line-height: 80rpx;
				}
			}

			&_info {
				margin: 0 32rpx;
				background-color: #F2DCC8;
				padding: 36rpx 26rpx;
				text-align: left;

				&--tit {
					color: #101010;
					font-weight: bold;
					font-size: 28rpx;
				}

				&--ls {
					font-size: 24rpx;
					color: #79350E;
					flex-wrap: wrap;

					view {
						width: 50%;
						margin-top: 12rpx;
					}
				}
			}

			&_pay {
				margin-top: 28rpx;
				padding: 24rpx 46rpx;
				font-size: 26rpx;
				background-color: #EADECA;
				color: #79350E;

				:deep(.u-checkbox) {
					display: block
				}

				:deep(.u-radio-group) {
					width: 100%;

					.u-radio {
						flex-direction: row-reverse;
						justify-content: space-between;
						margin-bottom: 28rpx;

						.u-radio__label {
							color: #79350E !important;
							font-size: 28rpx !important
						}
					}
				}

				&_tp {
					padding: 10rpx 0;
					font-size: 24rpx;
				}

				&_btm {
					border-top: 2rpx solid #C4A898;
					padding-top: 28rpx;
				}
			}
		}

		&_btm {
			position: fixed;
			bottom: 0;
			/* #ifdef MP-WEIXIN */
			padding-bottom: env(safe-area-inset-bottom);
			/* #endif */
			left: 0;
			right: 0;
			margin: auto;
			padding: 0 38rpx;
			background-color: #272325;
			height: 108rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			z-index: 9999;
			font-size: 26rpx;
			color: #E4B993;

			&_pay {
				background: linear-gradient(-1.16deg, rgba(242, 183, 130, 1) -2.16%, rgba(240, 216, 194, 1) 99.42%);
				color: #79350E;
				font-size: 24rpx;
				width: 206rpx;
				height: 60rpx;
				text-align: center;
				line-height: 60rpx;
				border-radius: 12rpx;
			}
		}
	}
</style>